<template>
  <CDialog
    :visible="visible"
    :title="title"
    width="630px"
    @cancel="handleCancel"
  >
    <div
      v-if="
        data.applyment_state == 'REJECTED' ||
        data.applyment_state == 'APPLYMENT_STATE_REJECTED'
      "
    >
      <p>驳回原因: {{ audit_detail_text }}</p>
    </div>
    <div
      v-if="
        data.sign_url &&
        data.applyment_state !== 'TO_BE_SIGNED' &&
        data.applyment_state !== 'APPLYMENT_STATE_TO_BE_SIGNED'
      "
      class="img-wrapper"
    >
      <img :src="data.sign_url" />
      <p>注:可用微信扫描上面二维码查看申请单进度</p>
    </div>
    <div
      v-if="
        data.applyment_state == 'TO_BE_SIGNED' ||
        data.applyment_state == 'APPLYMENT_STATE_TO_BE_SIGNED'
      "
      class="img-wrapper"
    >
      <p>请使用微信扫描下面二维码完成签约</p>
      <img :src="data.sign_url" alt="" />
    </div>
    <template slot="outerFooter">
      <el-button type="success" @click="handleSubmit">确定</el-button>
    </template>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
export default {
  name: 'SettlementStatusDlg',
  components: { CDialog },
  mounted() {
    let audit_detail
    if (typeof this.data.audit_detail === 'string') {
      audit_detail = JSON.parse(this.data.audit_detail).audit_detail
    } else {
      audit_detail = this.data.audit_detail
    }

    let textArr = []
    if (!Array.isArray(audit_detail)) {
      console.error('audit_detail', audit_detail)
      return
    }
    audit_detail.forEach((item) => {
      textArr.push(item.reject_reason)
    })

    this.audit_detail_text = textArr.join(',')
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      title: '申请状态',
      audit_detail_text: '',
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('update:visible', false)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.img-wrapper {
  text-align: center;
}
</style>
